<template>
    <div class="login_start">
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
                 class="login-container">
            <h2 class="title"><img src="../assets/logo.jpg" alt="" class="logo" width="32" height="32">商城后台管理系统登录</h2>
            <el-form-item prop="account">
                <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"
                          @keyup.enter.native="accountLogin"></el-input>
            </el-form-item>
            <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="accountLogin" :loading="logining">
                    登录
                </el-button>
                <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
            </el-form-item>
        </el-form>
        <footer>
            <p class="">版权所有：深圳市联云谷科技有限公司</p>
            <p class="">电话：400-888-5840 备案号：粤ICP备16109127号-1</p>
        </footer>
    </div>
</template>

<script>
  import {requestLogin} from '../api/api';
  import {mapActions, mapGetters} from 'vuex'
  // import NProgress from 'nprogress'
  export default {
    data () {
      return {
        logining: false,
        ruleForm2: {
          account: '',
          checkPass: ''
        },
        rules2: {
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
            // { validator: validaePass }
          ],
          checkPass: [
            {required: true, message: '请输入密码', trigger: 'blur'}
            // { validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    computed: {
      ...mapGetters(['getReturnPath', 'getToken'])
    },
    mounted: function () {
      let useStr = localStorage.getItem('user')
      let user = JSON.parse(useStr)
      this.ruleForm2.account = user.username
      this.ruleForm2.checkPass = user.password
      if (this.getToken !== '') {
        this.tokenLogin()
      }
    },
    methods: {
      ...mapActions(['setToken']),
      handleReset2 () {
        this.$refs.ruleForm2.resetFields();
      },
      // 尝试用token登录
      tokenLogin () {
        this.logining = true;
        let loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
        this.login({token: this.getToken}, loginParams)
      },
      // 账号密码登录
      accountLogin () {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.logining = true;
            // NProgress.start();
            let loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
            this.login(loginParams, loginParams)
          } else {
            console.log('error submit!!')
            return false;
          }
        });
      },
      login (params, user) {
        requestLogin(params).then(res => {
          this.logining = false;
          let {status} = res;
          if (status === 1) {
            // 保存用户名密码
            if (this.checked) {
              localStorage.setItem('user', JSON.stringify(user))
            } else {
              localStorage.removeItem('user')
            }
            sessionStorage.setItem('user', JSON.stringify(user))
            if (res.data.token !== undefined) {
              this.setToken(res.data.token)
            }
            // 登录成功页面跳转
            if (this.getReturnPath === '' || this.getReturnPath === this.$router.history.current.fullPath) {
              this.$router.push({path: '/index'})
            } else {
              this.$router.push({path: this.getReturnPath})
            }
          } else {
            if (params.token === undefined) {
              this.$message({
                message: '账号或密码错误',
                type: 'error'
              })
            } else {
              this.$message({
                message: 'token失效',
                type: 'error'
              })
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
    .login_start {
        background: url("../assets/bg1.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
    }

    .login-container {
        .logo {
            vertical-align: -8px;
            margin-right: 4px;
        }
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        position: relative;
        top: 180px;
        margin: auto;
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
        .remember {
            margin: 0px 0px 35px 0px;
        }
    }

    footer {
        position: absolute;
        width: 100%;
        top: 550px;
        text-align: center;
        p {
            color: #ccc;
            padding: 0;
            margin: 0;
            font-size: 12px;
        }
    }
</style>
